Skip to main content

Using Post-Processing for Nodes

In game development, post-processing effects can add unique visual elements to a scene, such as blur, outlines, color adjustments, and more. Dora SSR provides a simple way to implement post-processing on scene nodes. In this tutorial, we will introduce how to use Dora SSR's post-processing functionality for scene nodes and provide an example to demonstrate the process.

1. What is Scene Node Post-Processing?​

Scene node post-processing refers to rendering a specific node onto a texture and then applying shader effects to that texture. This allows you to apply special visual effects to certain parts of the scene without affecting other nodes.

2. Implementation Steps​

To implement post-processing on a scene node, follow these steps:

  1. Set the node's size: Specify the size of the node using the size property. This size will be used for the post-processing render target.
  2. Obtain the Grabber: Use the node:grab() method to get a Grabber, which handles the texture capturing.
  3. Apply Shader Effects: Set the effect property of the Grabber to apply your desired shader effect to the captured texture.

3. Code Example​

Below is a complete code example demonstrating how to apply post-processing to a scene node in Dora SSR.

-- Import necessary modules
local Spine <const> = require("Spine")
local Node <const> = require("Node")
local Size <const> = require("Size")
local SpriteEffect <const> = require("SpriteEffect")
local Color <const> = require("Color")

-- Load Spine animation resources
local spineStr = "Spine/moling"
local animations = Spine:getAnimations(spineStr)
local looks = Spine:getLooks(spineStr)

-- Create a Spine playable object
local playable = Spine(spineStr)
playable.x = 200
playable.y = 190
playable.look = looks[1]
playable:play(animations[1], true)

-- Define the post-processing render size
local width, height = 400, 600

-- Create a shader effect (using built-in outline effect)
local effect = SpriteEffect("builtin::vs_sprite", "builtin::fs_spriteoutlinecolor")
local pass = effect:get(1)
pass:set("u_linecolor", Color(0xff00ffff)) -- Set outline color
pass:set("u_lineoffset", 5 / width, 5 / height, 5, 0.1) -- Set outline parameters

-- Create a node and set its size
local node = Node()
node.size = Size(width, height)

-- Obtain the Grabber and apply the effect
local grabber = node:grab()
grabber.effect = effect

-- Add the playable object to the node
node:addChild(playable)

Code Breakdown​

  1. Import Modules: First, we import the necessary modules required for the script.

  2. Load Spine Animation: We use the Spine module to load the animation resources and retrieve the available animations and looks.

  3. Create Playable Object: A Spine object is instantiated, and its position, appearance, and animation playback are configured.

  4. Define Render Size: The width and height for the post-processing render target are defined.

  5. Create Shader Effect: A shader effect for outlining is created, and the outline color and parameters are set.

  6. Create Node and Set Size: A Node object is created, and its size is set. This size defines the area to be processed.

  7. Obtain Grabber and Apply Effect: The node:grab() method is called to obtain a Grabber, and the previously created shader effect is applied to the Grabber.

  8. Add Child Node: The Spine playable object is added to the node, which will be part of the post-processed scene.

4. Output and Summary​

Running the above code will produce the following results:

  • A 400x600 node containing the Spine animation.
  • The contents of this node will be rendered to a texture and processed with the outline shader effect.
  • The final result will show the animated character with an outline of the specified color.

Through this example, you can see how to apply post-processing to scene nodes in Dora SSR. This method allows you to achieve various unique visual effects, enhancing the overall appearance of your game.

5. Further Reading​

  • Custom Shaders: You can write custom shaders to create unique effects. Just specify your shader files when creating the SpriteEffect.
  • Dynamic Parameter Adjustment: By modifying shader parameters, you can dynamically adjust effects at runtime, such as changing the outline color or thickness.

We hope this tutorial helps you understand how to apply post-processing to scene nodes in Dora SSR. Happy developing!